<%@page pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp"%>

<body>
	<div id="app" v-cloak>

		<!--条件查询 -->
		<div class="toolbar2">
			<el-form :inline="true" :model="filters" label-position="top" size="small">
				<div style="margin-left: 16px;position: relative;">
					<el-form-item label="经营区域">
						<el-cascader v-model="regionIds" :options="regionData" :props="regionProps" @change="handleRegionChange"
						 clearable></el-cascader>
					</el-form-item>
					<el-form-item label="投诉对象" prop="individualId">
						<el-select v-model="filters.individualId" clearable filterable placeholder="请选择">
							<el-option v-for="item in individualData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<div style="position: relative">
			<el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
				<el-table-column prop="individualName" label="投诉对象" min-width="100"></el-table-column>
				<ex-table-column-enum enum-cd="003" prop="complainType" label="投诉类型" min-width="100"></ex-table-column-enum>
				<el-table-column prop="complainContent" label="投诉内容" min-width="100"></el-table-column>
				<el-table-column prop="time" label="上传日期" min-width="100" :formatter="dateFormat"></el-table-column>
				<el-table-column label="投诉图片（点击图片预览）" width="250">
					<template scope="scope">
						<el-image style="width: 100px; height: 100px" :src="'${imgesBaseUrl}/'+ scope.row.complainUrl.split(',')[0]"  :preview-src-list="previewList(scope.row)"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button type="" size="small" @click="handleSolve(scope.$index, scope.row)">处理</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
			<el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
			 :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next"></el-pagination>
			<el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
			 @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</div>

	</div>
</body>
<script>
	$(window).resize(function() {
		app.tableH = $(window).height() - 155;
	});

	var app = new Vue({
		el: '#app',
		data: {
			isMobile: '${isMobile}',
			tableH: $(window).height() - 155,
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			filters: {},
			editFormVisible: false,
			regionIds: [],
			regionData: [],
			regionProps: {
				label: 'name',
				value: 'id',
				children: 'children',
				checkStrictly: true
			},
			individualData: [],
			editLoading: false,
			tableData: []
		},
		created: function() {
			this.loadData();
			this.loadRegionData();
			this.loadIndividualData();
		},
		methods: {
			loadData: function() {
				this.loading = true;
				var data = Object.assign({}, this.filters);
				data.page = this.page;
				data.size = this.size;
				$.ajax({
					url: "${ctx}/backstage/complain/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.total = returndata.data.count;
							app.tableData = returndata.data.list;
						} else {
							app.total = 0;
							app.tableData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.loading = false;
					}
				});
			},
			loadIndividualData: function() {
				$.ajax({
					url: "${ctx}/backstage/individual/query",
					data: {
						roleId: 2,
						page: 1,
						size: 99
					},
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.individualData = returndata.data.list;
						} else {
							app.individualData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			loadRegionData: function() {
				$.ajax({
					url: "${ctx}/backstage/town/queryRegion",
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.regionData = returndata.data;
						} else {
							app.regionData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			handleSearch: function() {
				this.loadData();
			},
			sizeChange: function(val) {
				this.size = val;
				this.loadData();
			},
			handleCurrentChange: function(val) {
				this.page = val;
				this.loadData();
			},
			dateFormat: function(row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				if (date.length < 10) {
					var date = new Date(date * 1000); //如果date为10位不需要乘1000  
				} else {
					var date = new Date(date);
				}
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D;
			},
			handleRegionChange: function(val) {
				switch (val.length) {
					case 0:
						this.filters.districtId = '';
						this.filters.townId = '';
						break;
					case 1:
						this.filters.districtId = val[0];
						this.filters.townId = '';
						break;
					case 2:
						this.filters.districtId = val[0];
						this.filters.townId = val[1];
						break;
				}
			},
			previewList: function(row){
				var arr = [];
				row.complainUrl.split(',').forEach(function(url) {
				  arr.push('${imgesBaseUrl}/' + url);
				});
				return arr;
			},
			handleSolve: function(index, row) {
				this.$confirm('确认已经处理好此投诉吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					app.editLoading = true;
					$.ajax({
						url: "${ctx}/backstage/complain/solve",
						data: {
							id: row.id
						},
						dataType: 'json',
						success: function(returndata) {
							if (returndata.success) {
								app.loadData();
								app.$message({
									message: '处理成功!',
									type: 'success'
								});
							} else {
								app.$notify.error({
									title: '错误',
									message: returndata.errors.message
								});
							}
							app.editLoading = false;
						}
					});
				});
			}
		}
	});
</script>
